﻿<template>
    <div id="app">
        <mt-header v-bind:title="title" style="background-color:#fda10e">
            <a slot="left" @click="back">返回</a>

        </mt-header>

        <div class="mui-content" style="background-color:#f5f5f5;">

            <form class="mui-input-group">
                <div class="mui-table-view-cell">
                    <a  class="mui-navigate-right">申请人<span class="mui-pull-right">{{truename}}</span></a>
                </div>
                <div class="mui-table-view-cell">
                    <a  class="">手机号码<span class="mui-pull-right">{{phone}}</span></a>
                </div>

                <div class="mui-table-view-cell">
                    <a class="">开始时间<span class="mui-pull-right" @click="openPicker(1)">{{stime}}</span></a>
                </div>

                <div class="mui-table-view-cell">
                    <a  class="">结束时间<span class="mui-pull-right" @click="openPicker(2)">{{etime}}</span></a>
                </div>
                <div class="mui-table-view-cell">
                    <a  class="">
                        请假时长<span class="mui-pull-right">
                            <input type="number" v-model="num" style="width:50px;height:30px;" />天
                        </span>
                    </a>
                </div>
                <p style="margin:10px;">请假事由</p>

                <div class="mui-input-view" style="margin: 10px 5px;">
                    <textarea id="textarea" rows="5" v-model="desc" placeholder="请输入请假事由"></textarea>
                </div>


                <p style="text-align:center;padding-bottom:10px;">
                    <Button type="error" shape="circle" style="width:80%;background-color:#fea00a" @click="sub">提交</Button>
                </p>

            </form>
        </div>
        <mt-datetime-picker ref="picker"
                            v-model="pickerVisible"
                            type="date"
                            year-format="{value} 年"
                            month-format="{value} 月"
                            :start-date='startData'
                            :end-date="endDate"
                            @confirm="queDing">
        </mt-datetime-picker>
    </div>

</template>

<script>
    import { Toast } from 'mint-ui';
    import { DatetimePicker } from 'mint-ui';
    import Bus from '../bus.js'
    export default {
        name: 'app',
        data() {
            return {
                title: '请假',
                page: 1,
                list: [],
                truename: "",
                phone: "",
                startData: new Date(),
                endDate: new Date(),
                pickerVisible: new Date(),
                stime: "请选择",
                etime: "请选择",
                num: "",
                index: "",
                desc: ""

            }
        },
        components: {

        },
        mounted() {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            window.onpopstate = () => {
              
                this.$router.go(-1);
            }
        },
        methods:
        {

            sub: function () {
                var sid = window.localStorage.getItem('studentid');
                var userid = window.localStorage.getItem('userid');
                var stime = this.$data.stime;
                var etime = this.$data.etime;
                var day = this.$data.num;
                var desc = this.$data.desc;

                this.$api.post('wx/Index/leaveadd', {
                    "sid": sid,
                    "stime": stime,
                    "etime": etime,
                    "day": day,
                    "desc": desc,
                    "userid": userid
                }, response => {
                    console.log(response.status);
                    if (response.status >= 200 && response.status < 300) {
                        var data = response.data;
                        if (data.status == 200) {
                            Toast(data.message);
                            Bus.$emit('val', "show")
                            this.$router.push("home");

                        } else {
                            Toast(data.message);
                        }
                        //this.$data.code = response.data;

                        //请求成功，response为成功信息参数
                    } else {

                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            openPicker(index) {
                this.$data.index = index;
                this.$refs.picker.open();
            },
            queDing(e) {
                var index = this.$data.index;
                console.log(e);
                if (index == "1") {
                    this.$data.stime = e.getFullYear() + "-" + (parseInt(e.getMonth()) + 1) + "-" + e.getDate();
                } else if (index == "2") {
                    this.$data.etime = e.getFullYear() + "-" + (parseInt(e.getMonth()) + 1) + "-" + e.getDate();
                }
                var stime = this.$data.stime;
                var etime = this.$data.etime;

                var arr1 = stime.split(/[- : \/]/);
                var arr2 = etime.split(/[- : \/]/);
          
                var day = (new Date(arr2[0], arr2[1] - 1, arr2[2]) - new Date(arr1[0], arr1[1] - 1, arr1[2])) / (1000 * 60 * 60 * 24);/*不用考虑闰年否*/

               
                if (!isNaN(day)) {
                    this.$data.num = day + 1;
                }



            },
            load: function () {
                var endDate = new Date();
                endDate.setFullYear(endDate.getFullYear() + 10);
                this.$data.endDate = endDate;
                var truename = window.localStorage.getItem('truename');
                var phone = window.localStorage.getItem('phone');
                this.$data.truename = truename;
                this.$data.phone = phone;
            },
            back: function () {
               
                this.$router.go(-1);
            }
        },
        created: function () {
            this.load();
        }

    }
</script>

<style scoped>
</style>